<template>
  <div>
    <!-- 图标搜索框 -->
    <el-input v-model="searchText" placeholder="搜索图标" clearable/>
    
    <!-- 图标展示区域 -->
    <div class="icon-list">
      <div 
        v-for="icon in filteredIcons" 
        :key="icon" 
        class="icon-item"
        :class="{ 'selected': selectedIcon === icon }"
        @click="handleSelect(icon)"
      >
        <i :class="icon"></i>
        <span>{{ icon }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import icons from '@/assets/icons/elementUi/element-icons'

export default {
  data() {
    return {
      searchText: '',
      selectedIcon: '',
      icons: icons
    }
  },
  computed: {
    filteredIcons() {
      return this.icons.filter(icon => 
        icon.toLowerCase().includes(this.searchText.toLowerCase())
      )
    }
  },
  methods: {
    handleSelect(icon) {
      this.selectedIcon = icon
      this.$emit('selected', icon) // 触发选择事件
    },
    reset() {
      this.selectedIcon = ''
      this.searchText = ''
      this.icons = icons
    }
  }
}
</script>

<style scoped>
.icon-list {
  height: 40vh;
  max-height: 40vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 15px;
}

.icon-item {
  padding: 10px;
  cursor: pointer;
  text-align: center;
  border: 1px solid #eee;
  transition: all 0.3s;
}

.icon-item:hover {
  background: #f5f7fa;
}

.icon-item.selected {
  border-color: #409eff;
  background: #ecf5ff;
}

.icon-item i {
  font-size: 24px;
  display: block;
  margin-bottom: 5px;
}

.icon-item span {
  font-size: 12px;
  color: #666;
  word-break: break-all;
}
</style>